<template>
  <div>
    <el-input v-model="input" placeholder="输入组名" size="mini" style="width: 200px"></el-input>

    <el-button size="mini">查询</el-button>

    <el-button size="mini"  @click="addIpsView">新增</el-button>


    <template>
      <el-table
        :data="ips"
        border
        height="750"
        style="width: 100%;">
        <el-table-column
          prop="name"
          label="名字">
        </el-table-column>

 <!--       <el-table-column
          prop="name"
          label="关联用户">
        </el-table-column>-->

        <el-table-column
          prop="ipAddr"
          label="企业ip">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addattr(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteIp(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog title="属性修改" :visible.sync="dialogFormVisible" size="mini" style="width: 100%;height: 500px">
      <el-form :model="form" size="mini" :inline="true">
        <el-form-item label="名字" :label-width="formLabelWidth" >
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="ip" :label-width="formLabelWidth" >
          <el-input v-model="form.ipAddr"   :inline="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="addip()" size="mini"> 确 定</el-button>
      </div>
    </el-dialog>s






  </div>
</template>

<script>


  import axios from 'axios';


  export default {
    name: 'HelloWorld',
    data() {
      return {
        ips:[],
        pageSize:100,
        dialogFormVisible:false,
        form:{},
        formLabelWidth:"180",
        input:"",
      }
    },


    methods: {
      getPage(obj, b) {
        /* {
           "currentPageNum": 1,
           "endIndex": 0,
           "pageSize": 100,
           "total": 0 http://localhost:20000/manage/page/group

         }*/
        axios.post(process.env.BASE_API + obj.url, obj.data).then(respone => {
          this.ips = respone.data;
        })
          .catch(error => {

          })

      },
   //   http://localhost:20000/ip/getIps

      addgroup(){




      },
      addIpsView(){

        this.dialogFormVisible=true;



      },
      addip(){
       // console.log();

        axios.post(process.env.BASE_API + "ip/insert", this.form).then(respone => {
          this.ips = respone.data;
        })
          .catch(error => {

          })


        this.dialogFormVisible=false;
      },
      deleteIp(row){
        console.log(row);
        axios.delete(process.env.BASE_API + "ip/deleteByPrimaryKey", {data: row}).then(respone => {
          this.ips = respone.data;
        })
          .catch(error => {

          })


      },


    },


    mounted() {

      let obj= {data:{
          "currentPageNum": 1,
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        },
        url:"ip/getIps",
      };
      this.getPage(obj,this);

    },




  }
</script>

<style scoped>



</style>
